<template>
    <van-nav-bar
            title="音乐播放"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"

    />
    <van-search v-model="value"
                placeholder="请输入搜索关键词"
                input-align="center"
                show-action
                type="text"
                shape="round"
                background="#4fc08d"
                @cancel="onCancel"
                @keyup.enter="search"

    />

    <div class="list" style="margin-bottom:10px;">
        <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <van-cell icon="play-circle-o"
                          @click="play(item.id)"
                          v-for="item in list"  :title="item.name" />
            </van-list>
        </van-pull-refresh>
    </div>
    <div>
        <audio class="ye" :src="musicUrl" controls="controls"

        ></audio>
    </div>

    <!--  <h1 class="ye">此处不留爷，</h1>-->
</template>

<script>


    export default {

        components: {

        },
        data(){
            return{
                value:"",
                list:[],
                musicUrl:'',
                loading: false,
                finished: false,
                refreshing: false
            }
        },
        methods:{
            onClickLeft() {
                this.$router.push("/MY")
            },
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        var that=this;
                        this.axios.get("https://autumnfish.cn/search?keywords="
                            + this.value).then(function (response) {
                            console.log(response);
                            that.list= response.data.result.songs;
                        },function(err) {

                        })
                        this.refreshing = false;
                    }
                    /*
                                  for (let i = 0; i < 10; i++) {
                                      this.list.push(this.list.length + 1);
                                  }*/
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            search:function () {
                var that=this;
                this.axios.get("https://autumnfish.cn/search?keywords="
                    + this.value).then(function (response) {
                    console.log(response);
                    that.list= response.data.result.songs;
                },function(err) {

                })

            },
            play:function (musicId) {
                var that=this;
                /* console.log(musicId)*/
                this.axios.get("https://autumnfish.cn/song/url?id="+musicId)
                    .then(function (response) {
                        /*  console.log(response)*/
                        console.log(response.data.data[0].url)
                        that.musicUrl = response.data.data[0].url;
                    },function (err) {
                    });
            },
        },

    }
</script>
<style>
    .list{

    }
    .ye{
        /* text-align: center;*/
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10px;
    }

    .PlayMusic {
        display: inline-block;
        width: 600px;
        height: 83px;
        text-align: center;
        line-height: 100px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }
</style>